<template lang="html">
    <div>
        <div :class="$style.mylimit">
            <!-- <el-row
                type="flex"
                justify="space-between"
                v-if="this.$store.state.user_info.shengyu_cishu ||this.$store.state.user_info.shengyu_cishu == 0"
            >
                <span
                    :class="$style.title"
                    v-if="getToken"
                    @mouseover="showUserSelfLimits=true"
                    @mouseout="showUserSelfLimits=false"
                >{{ showUserSelfLimits===false?"查看我的权限":"收起权限表" }}</span>
                <span
                    v-if="this.$store.state.user_info && (this.$store.state.user_info.shengyu_cishu ||this.$store.state.user_info.shengyu_cishu == 0||this.$store.state.user_info.shengyu_cishu==null)"
                    :class="$style.title"
                >今日总剩余{{ this.$store.state.user_info.shengyu_cishu==null?"n":this.$store.state.user_info.shengyu_cishu }}次</span>
            </el-row> -->
            <!-- <div
                v-if="showUserSelfLimits"
                :class="$style.tables"
            >
                <el-table
                    :data="mylimits"
                    style="width: 100%;border: 1px solid #ebebeb;margin-top:5px;"
                    :row-class-name="tableRowClassName"
                >
                    <el-table-column
                        prop="site_info.site"
                        label="资源网"
                    />
                    <el-table-column
                        align="center"
                        label="过期时间"
                    >
                        <template slot-scope="scope">
                            <span v-if="scope.row.expire_time == null">
                                无时间限制
                            </span>
                            <span v-else>
                                {{ scope.row.expire_time | moment("YYYY-MM-DD H:mm:ss") }}
                            </span>
                        </template>
                    </el-table-column>
                    <el-table-column
                        align="center"
                        label="剩余下载次数"
                    >
                        <template slot-scope="scope">
                            {{ scope.row.number==null?"无次数限制":scope.row.number }}
                        </template>
                    </el-table-column>
                    <el-table-column
                        align="center"
                    >
                        <template slot-scope="scope">
                            <el-tag
                                :type="limitStatus(scope.row)"
                                disable-transitions
                            >
                                {{ limitStatus(scope.row)=='success'?"√":"×" }}
                            </el-tag>
                        </template>
                    </el-table-column>
                </el-table>
            </div> -->
        </div>
        <!-- <div :class="$style.timeline">
            <el-timeline>
                <el-timeline-item
                    v-for="download_info in this.$store.state.user.downloadInfo"
                    :key="download_info.id"
                    :timestamp="download_info.create_time | moment('YYYY-MM-DD')"
                    placement="top"
                    size="large"
                >
                    <el-card>
                        <h4>素材：{{ download_info.resource.resource_url }}</h4>
                        <p>下载于 {{ download_info.create_time | moment("YYYY-MM-DD H:mm:ss") }}</p>
                    </el-card>
                </el-timeline-item>
            </el-timeline>
        </div> -->
    </div>
</template>

<script>
import {
    getToken,
    setToken,
    removeToken,
    setCookie
} from '@/utils/cookie'
export default {
    data() {
        return {
            getToken: getToken(),
            mylimits: [],
            showUserSelfLimits: false,
        };
    },
    methods: {
        limitStatus(row) {
            if (row.number != null && row.number <= 0) {
                return "danger"
            }
            if (row.expire_time != null && (row.expire_time - Date.parse(new Date()) / 1000) <= 0) {
                return "danger"
            }
            if (!this.$store.state.user.user_info.shengyu_cishu || this.$store.state.user.user_info.shengyu_cishu <= 0) {
                return "danger"
            }
            return 'success'
        },
        userSelfLimitController() {
            this.showUserSelfLimits = !this.showUserSelfLimits
        },
        tableRowClassName({
            row,
            rowIndex
        }) {
            if (rowIndex === 1) {
                return 'warning-row';
            } else if (rowIndex === 3) {
                return 'success-row';
            }
            return '';
        },
        init() {
            this.getUserDownloadInfo();
            this.getUserSelfLimitInfo();
        },
        getUserDownloadInfo() {
            if (getToken()) {
                this.$store.dispatch('downloadInfo').then();
            }
        },
        getUserSelfLimitInfo() {
            if (getToken()) {
                this.$store.dispatch('getUserSelfLimitInfo').then(res => {
                    this.mylimits = res.data
                });
            }
        }
    },
    created() {
        this.init();
    }
}
</script>

<style lang="scss" scoped module>
.timeline {
    width: 600px;
    height: 150px;
    margin: auto;
    align-items: center;
    h4 {
        font-weight: 400;
        color: #1f2f3d;
        display: block;
        margin-block-start: 1.33em;
        margin-block-end: 1.33em;
        margin-inline-start: 0;
        margin-inline-end: 0;
    }
    p {
        font-size: 14px;
        color: #5e6d82;
        line-height: 1.5em;
        display: block;
        margin-block-start: 1em;
        margin-block-end: 1em;
        margin-inline-start: 0;
        margin-inline-end: 0;
    }
}
.mylimit {
    font-weight: 400;
    color: #1f2f3d;
    width: 600px;
    height: 100%;
    margin: auto auto 20px;
    align-items: center;
    .title {
        color: #5e6d82;
        font-size: 14px;
        cursor: pointer;
    }
    .tables {
        position: absolute;
        width: 600px;
        border: 1px;
        z-index: 1000;
    }
}
</style>
